<template>
  <yd-ls-box>
    <yd-ls-layout title="申请退款" :tolfurl="urls" :onfoot=false >
      <div class="yd-ls-height"></div>
      <div class="yd-ls-waming" v-if="refundBase.op_remark">
        {{ refundBase.op_remark }}
      </div>
      <yd-cell-group class="yd-ls-accountapply-cell-group">
        <yd-cell-item class="yd-ls-accountapply-cell-item" arrow>
          <span slot="left">退款原因</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            @click.stop="showreason = true"
            v-model="reason"
            readonly
            placeholder="请选择退款原因">
        </yd-cell-item>
        <yd-cell-item class="yd-ls-accountapply-cell-item">
          <span slot="left">退款金额</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            v-model="money"
            readonly>
        </yd-cell-item>
        <yd-cell-item class="yd-ls-accountapply-cell-item yd-ls-accountapply-cell-details">
          <span slot="left">退款说明</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            @click.stop="showdetails = true"
            readonly placeholder="(非必填)">
        </yd-cell-item>
        <div class="yd-ls-accountapply-details" @click="showdetails = true">
          <p>
            <input
              type="text"
              unselectable="on"
              onfocus="this.blur()"
              v-if="!details"
              readonly placeholder="请填入退款相关说明">
            <span>{{ details }}</span>
          </p>
        </div>
        <yd-cell-item class="yd-ls-accountapply-cell-item"  arrow>
          <span slot="left">退款帐号</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            @click.stop="showaccounts = true"
            v-model="accounts"
            readonly placeholder="未填写">
        </yd-cell-item>
      </yd-cell-group>

      <!--展示 退款原因-->
      <yd-actionsheet :items="reasonSelect" v-model="showreason"></yd-actionsheet>

      <!--展示 退款说明-->
      <yd-popup v-model="showdetails" position="right" width="100%">
        <yd-ls-popup-header headname="填写信息" btnname="确定" @handle-popup-back="goback" @handle-popup-button="comfdetails"></yd-ls-popup-header>

        <yd-cell-group>
          <yd-cell-item>
            <yd-textarea slot="right" placeholder="请填入退款相关说明" maxlength="100" v-model="details"></yd-textarea>
          </yd-cell-item>
        </yd-cell-group>
      </yd-popup>
      <!--展示 帐号-->
      <yd-popup class="yd-ls-accountapply-popup" v-model="showaccounts" position="right" width="100%">
        <yd-ls-popup-header headname="退款账号" btnname="保存" @handle-popup-back="goback" @handle-popup-button="banksave"></yd-ls-popup-header>

        <yd-cell-group class="yd-ls-accountapply-cell">
          <yd-cell-item>
            <span slot="left">持卡人：</span>
            <input slot="right" maxlength="10" type="text" v-model="carduser" ref="carduser" placeholder="请填写持卡人真实姓名">
          </yd-cell-item>
          <yd-cell-item arrow>
            <span slot="left">银 行：</span>
            <input
              slot="right"
              type="text"
              unselectable="on"
              onfocus="this.blur()"
              @click.stop="showbank = true"
              v-model="bank"
              readonly
              placeholder="请选择对应的银行">
          </yd-cell-item>
          <yd-cell-item>
            <span slot="left">卡 号：</span>
            <input slot="right" type="number" v-model="cardno" placeholder="请填写银行卡号，仅限储蓄卡">
          </yd-cell-item>
        </yd-cell-group>

        <!--展示 选择银行-->
        <yd-popup v-model="showbank" position="bottom" height="60%" style="text-align:center">
          <span v-for="(item,index) in bankSelect" @click="chooseBank(item.label)" :key="index" class="yd-actionsheet-item">{{item.label}}</span>
        </yd-popup>
        <!-- <yd-actionsheet  :items="bankSelect" class="yd-ls-showbank" v-model="showbank"></yd-actionsheet> -->
      </yd-popup>
      

      <yd-ls-title lftit="温馨提示"></yd-ls-title>
      <yd-ls-content>
        <div slot="content">
          <ul>
            <li>1、退款金额不可修改；</li>
            <li>2、请准确填写退款账号，否则将影响退款进度。</li>
          </ul>
        </div>
      </yd-ls-content>
      <div class="yd-ls-height"></div>
    </yd-ls-layout>
    <div style="position:fixed;  width:100%; bottom:0;">
      <yd-button v-if="refundBase.refund_id==0" size="large" bgcolor="rgb(72, 112, 243)" color="#fff" @click.native="submitApply(0)">提交申请</yd-button>
      <yd-button v-if="refundBase.op_status==4" size="large" bgcolor="rgb(72, 112, 243)" color="#fff" @click.native="submitApply(0)">重新提交</yd-button>
      <yd-button v-if="(refundBase.op_status==0 || refundBase.op_status==1)&&refundBase.refund_id>0" color="#056DFF" size="large" type="disabled" disabled>退款审核中</yd-button>
      <yd-button v-if="refundBase.op_status==3" color="#056DFF" size="large" type="disabled" disabled>已退款</yd-button>
      <yd-button v-if="refundBase.op_status==2" color="#F40428" size="large" type="disabled" disabled>退款已关闭</yd-button>
    </div>
  </yd-ls-box>
</template>

<style>

  .yd-ls-accountapply-details p {
    padding-left: .12rem;
    font-size: .3rem;
  }
  .yd-ls-accountapply-details p span {
    line-height: .5rem;
    display: inline-block;
  }
  .yd-ls-accountapply-cell-group {
    margin-bottom: 0;
  }
  .yd-ls-accountapply-cell-group .yd-ls-accountapply-cell-details:not(:last-child):after {
    border-bottom: 0;
  }
  .yd-ls-accountapply-details {
    padding-left: .24rem;
    line-height: .6rem;
    color: #555;
  }
  .yd-ls-accountapply-details:after {
    display: block;
    content: "";
    width: 100%;
    font-size: .3rem;
    border-bottom: 1px solid #d9d9d9;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
  .yd-ls-accountapply-details input {
    border: 0;
  }
  .yd-ls-accountapply-cell .yd-cell-left span:nth-child(2) {
    width: 60px;
    text-align: right;
  }
  .yd-ls-accountapply-cell-item .yd-cell-left span:nth-child(2) {
    padding-right: .48rem
  }
  .yd-ls-accountapply-cell-details .yd-cell-left span:nth-child(2) {
    padding-right: .1rem
  }

  .yd-ls-accountapply-popup .yd-popup {
    z-index: 1500;
  }

</style>
<script>
  import ydLsBox from '../../../components/yd-ls-box.vue'
  import ydLsLayout from '../../../components/yd-ls-layout.vue'
  import ydLsPopupHeader from '../../../components/yd-ls-popup-header.vue'
  import ydLsTitle from '../../../components/yd-ls-title.vue'
  import ydLsContent from '../../../components/yd-ls-content.vue'
  import ydLsButton from '../../../components/yd-ls-button.vue'
  import District from 'ydui-district/dist/jd_province_city_id'
  import api from '../../../axios/api'

  export default {
    name: 'accountApply',
    data() {
      return {
        urls: 'index.html#/account?type=1',
        reason: '',
        showreason: false,
        money: '',
        details: '', // 退款说明
        showdetails: false,
        accounts: '',
        showaccounts: false,
        carduser: '',
        bank: '',
        showbank: false,
        bankSelect: [],
        reasonSelect: [],
        cardId: '',
        cardno: '',
        refundBase: '',
        bankList: [],
        reasonList: []
      }
    },
    created() {
      //TODO:初始化数据
      let _this = this
      let price = this.$route.query.price
      this.money = `${price}元`
      let rid = this.$route.query.rid
      let type = this.$route.query.type
      this.getApplyAll(rid)
      //this.getSelectAll(type)
      sessionStorage.isAccountActives = type*1 -1

    },
    methods: {
      getApplyAll(id) {
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api.account_refund_base, {params:{refund_id: id}})
          .then(m=>{
            let account_refund_base_data = m.data
            this.refundBase = account_refund_base_data.data
            this.details = this.refundBase.refund_remark
            this.cardId = this.refundBase.card_id
            this.accounts = '尾号' + this.refundBase.card_no
            this.reason = this.refundBase.refund_reason
            this.getBankList()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      getBankList() {
        let _this = this
        this.axios.get(api.base_bank_list)
          .then(m=>{
            //银行列表
            let bank_list_data = m.data
            this.bankList = bank_list_data.data
            this.bankList.forEach(function (value) {
              let newBankList = {
                label: value.text,
                callback: () => {
                  _this.bank = value.text;
                }
              }
              _this.bankSelect.push(newBankList)
            })
            this.getReasonList()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      getReasonList() {
        let _this = this
        let type = this.$route.query.type
        this.axios.get(api.base_reason_list,{ params: {visit_type: type}})
          .then(m=>{
             //退款原因
            let reason_list_data = m.data
            _this.reasonList = reason_list_data.data
            _this.reasonList.forEach(function (value) {
              let newReasonList = {
                label: value.text,
                callback: () => {
                  _this.reason = value.text;
                }
              }
              _this.reasonSelect.push(newReasonList)
            })
            this.$dialog.loading.close()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      comfdetails () {
        this.showdetails = false
      },
      comfaccounts () {
        this.showaccounts = false
      },
      chooseBank (val) {
        this.showbank = false;
        this.bank = val;
      },
      goback () {
        this.showdetails = false
        this.showaccounts = false
      },
      banksave () {
        if(!!!this.carduser || !!!this.bank || !!!this.cardno) {
          this.notify('请先填写完整页面内容再保存！')
          return
        }
        let params = {
          person: this.carduser,
          bank: this.bank,
          card_no: this.cardno
        }
        this.axios.post(api.account_bank_save, params)
          .then(m=>{
            let account_bank_data = m.data
            this.cardId = account_bank_data.data.id
            this.accounts = '尾号' + account_bank_data.data.card_no
            this.showaccounts = false
          }).catch(err=>{
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      areafun (ret) {
        this.address = ret.itemName1 + ' ' + ret.itemName2;
      },
      submitApply(n) {

        if(!!!this.reason) {
          this.notify('请填写退款原因！')
          return
        }
        if(!!!this.accounts) {
          this.notify('请填写退款账号！')
          return
        }
        let params = {
          refund_id: this.$route.query.id,
          refund_reason: this.reason,
          refund_remark: this.details,
          card_id: this.cardId
        }
        this.axios.post(api.account_refund_apply, params)
          .then(m=>{
            this.$router.push({path:'account', query:{type:1}})
          }).catch(err=>{
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      notify(info) {
        this.$dialog.notify({
          mes: info,
          timeout: 1500
        });
      }
    },
    mounted() {
    },
    watch: {
      carduser(myval) {
        let name = myval.replace(/(^\s*)/g, "");//去除开头空格
        let expression = new RegExp("^[\u4E00-\u9FA5A-Za-z ]+$");
        if(!expression.test(name)){
          this.$dialog.notify({
            mes: '请填写持卡人真实姓名！',
            callback: ()=> {
              let cuser = this.$refs.carduser
              cuser.value = ''
              cuser.focus()
            },
            timeout: 1500
          });
          return;
        }
      }
    },
    components: { ydLsBox, ydLsLayout, ydLsPopupHeader, ydLsTitle, ydLsContent, ydLsButton }


  }
</script>
